<template>
  <view class="container">
    <view class="header">
      <text class="title">Loft超薄夹层</text>
      <text class="subtitle">专业施工 品质保证</text>
    </view>
    
    <view class="features">
      <view class="feature-item" @click="goCalculator">
        <image src="/static/calculator.png" class="feature-icon"></image>
        <text class="feature-text">造价测算</text>
      </view>
      
      <view class="feature-item" @click="goPlans">
        <image src="/static/plans.png" class="feature-icon"></image>
        <text class="feature-text">方案展示</text>
      </view>
      
      <view class="feature-item" @click="goMember">
        <image src="/static/member.png" class="feature-icon"></image>
        <text class="feature-text">会员中心</text>
      </view>
    </view>
    
    <view class="info">
      <text class="info-title">项目介绍</text>
      <text class="info-content">
        兰州环球中心五号楼loft公寓，专业的超薄夹层施工方案，
        为您打造舒适的双层空间。我们拥有专业的施工团队和丰富的经验，
        确保工程质量和进度。
      </text>
    </view>
  </view>
</template>

<script>
import { logVisit } from '../../api/auth.js'

export default {
  onLoad() {
    this.recordVisit()
  },
  
  methods: {
    recordVisit() {
      const openid = uni.getStorageSync('openid')
      logVisit({
        wechat_openid: openid,
        page: 'index',
        action: 'visit'
      }).catch(() => {})
    },
    
    goCalculator() {
      uni.navigateTo({
        url: '/pages/calculator/calculator'
      })
    },
    
    goPlans() {
      uni.navigateTo({
        url: '/pages/plans/plans'
      })
    },
    
    goMember() {
      uni.switchTab({
        url: '/pages/member/member'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.header {
  text-align: center;
  padding: 60rpx 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  opacity: 0.9;
}

.features {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
}

.feature-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 20rpx;
}

.feature-text {
  font-size: 28rpx;
  color: #333;
}

.info {
  background: white;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.info-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.info-content {
  display: block;
  font-size: 28rpx;
  line-height: 1.8;
  color: #666;
}
</style>

